<template>
  <el-container class="common-container">
    <div class="common-aside">
      <el-aside class="common-aside" :width="$store.state.navCollapse ? '60px' : '190px'">
        <common-aside />
      </el-aside>
    </div>
    <el-container>
      <el-header class="common-header">
        <common-head />
      </el-header>
      <el-main class="common-main">
        <div id="Page">
          <img src="../../assets/img/color.png" id="bgc">
          <div class="chart_left">
            <!-- <div class="title">各区域报修量</div> -->
            <!-- <div id="chartPie" ref="chartCampusOrder" @click="goMaintain()"></div> -->
            <div id="chartPie" ref="chartCampusOrder"></div>

          </div>
          <div class="chart_center">
            <div id="chartPie" ref="chartCenter"></div>

            <!-- <img src="../../assets/img/map.png" alt="" class="map"> -->

            <!-- <baidu-map id="map" class="map" dragging scroll-wheel-zoom center="合肥市翡翠湖" :zoom="15">
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                :autoLocation="true"></bm-geolocation>
              <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
              <bm-marker :position="markerPoint" dragging raiseOnDrag animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
              <bm-marker :position="markerPoint" dragging raiseOnDrag animation="BMAP_ANIMATION_BOUNCE"
                :icon="{ url: pointIcon, size: { width: 150, height: 150 } }"></bm-marker>
            </baidu-map> -->
          </div>
          <div class="chart_right">
            <!-- <div class="title">各校区学生人数</div> -->
            <!-- <div id="chartPie" ref="chartCampusStu" @click="goStudent()"></div> -->
            <div id="chartPie" ref="chartCampusStu"></div>

          </div>
          <div class="chart_left">
            <!-- <div class="title">报修评价</div> -->
            <!-- <div id="chartPie" ref="chartEvaluationCount" @click="goMaintain()"></div> -->
            <div id="chartPie" ref="chartEvaluationCount"></div>

          </div>
          <div class="chart_center">
            <!-- <div class="title">近一周报修量</div> -->
            <!-- <div id="chartPie" ref="chartWeekOrder" @click="goMaintain()"></div> -->
            <div id="chartPie" ref="chartWeekOrder"></div>


          </div>
          <div class="chart_right">
            <!-- <div class="title">全校学生类型</div> -->
            <!-- <div id="chartPie" ref="chartStudentType" @click="goStudent()"></div> -->
            <div id="chartPie" ref="chartStudentType"></div>

          </div>
          <!-- <div id="chartBox">
            <div id="Nowtime">{{ time }}</div>
            <div id="chartBar" ref="chartBar" @click="goMaintain"></div>
            <div id="chartPie" ref="chartPie" @click="goStudent"></div>
          </div> -->
          <button id="refresh" @click="refresh()">刷新数据</button>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import CommonAside from '../../components/CommonAside.vue'
import * as echarts from 'echarts'
import { getOrderType, getEvaluationCount, getOrderCountByTime } from '_api/MaintainView/MaintainForm/index.js'
import { getCampusStudent, getStudentType } from '_api/UserManage/Student/index.js'
export default {
  components: {
    CommonHead,
    CommonAside,

  },
  data() {
    return {
      myChart: null,
      markerPoint: { lng: 117.19, lat: 31.773 },
      pointIcon: require('../../assets/img/AD.png'),
      time: "",
      // orderWeek: []
    }
  },
  methods: {
    refresh() {
      this.$store.commit('DElETE_orderWeek')
      this.$store.commit('DELETE_timeWeek')
      this.getCampusStudent()
      this.$store.commit('SET_timeWeek', this.getDateDay(0))
      this.$store.commit('SET_timeWeek', this.getDateDay(-1))
      this.$store.commit('SET_timeWeek', this.getDateDay(-2))
      this.$store.commit('SET_timeWeek', this.getDateDay(-3))
      this.$store.commit('SET_timeWeek', this.getDateDay(-4))
      this.$store.commit('SET_timeWeek', this.getDateDay(-5))
      this.$store.commit('SET_timeWeek', this.getDateDay(-6))
      this.initChartStudentType()
      this.initChartCampusStu()
      this.initChartCampusOrder()
      this.initChartEvaluationCount()
      this.initChartWeekOrder()

    },
    getOrderCountByTime() {
      // this.$store.commit('DElETE_orderWeek')
      getOrderCountByTime({ time: this.getDateWeek(0) }).then(res => {
        this.$store.commit('SET_orderOne', res.data.data)
        getOrderCountByTime({ time: this.getDateWeek(-1) }).then(res => {
          this.$store.commit('SET_orderTwo', res.data.data)
          getOrderCountByTime({ time: this.getDateWeek(-2) }).then(res => {
            this.$store.commit('SET_orderThree', res.data.data)
            getOrderCountByTime({ time: this.getDateWeek(-3) }).then(res => {
              this.$store.commit('SET_orderFour', res.data.data)
              getOrderCountByTime({ time: this.getDateWeek(-4) }).then(res => {
                this.$store.commit('SET_orderFive', res.data.data)
                getOrderCountByTime({ time: this.getDateWeek(-5) }).then(res => {
                  this.$store.commit('SET_orderSix', res.data.data)
                  getOrderCountByTime({ time: this.getDateWeek(-6) }).then(res => {
                    this.$store.commit('SET_orderSeven', res.data.data)
                  })
                })
              })
            })
          })
        })
      })
    },
    getEvaluationCount() {
      getEvaluationCount().then(res => {
        this.$store.commit('SET_evaluationCount', res.data.data)
        this.getOrderCountByTime()
      })
    },
    getOrderType() {
      getOrderType().then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_campusOrder', res.data.data)
          this.getEvaluationCount()
        }
      })
    },
    getCampusStudent() {
      getCampusStudent().then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_campusStudent', res.data.data)
          this.getStudentType()
        }
      })
    },
    getStudentType() {
      getStudentType().then(res => {
        if (res.data.success == true) {
          this.$store.commit('SET_studentType', res.data.data)
          this.getOrderType()
        }
      })
    },
    goMaintain() {
      this.$router.push('/MaintainForm')
    },
    goStudent() {
      this.$router.push('/Student')
    },
    getTime() {
      var that = this
      var getNowTime = function () {
        var date = new Date();
        var year = date.getFullYear()
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
        var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
        var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        that.time = `${year}-${month}-${day} ${hour}:${min}:${sec}`;
      }
      setInterval(() => {
        getNowTime()
      }, 1000)
    },
    // 个性化字
    initChartCenter() {
      this.myChart = echarts.init(this.$refs.chartCenter)
      // 调用setOption绘制图表
      this.myChart.setOption({
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '安大后勤数据管理',
                fontSize: 60,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#409EFF',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: '#409EFF'
                    }
                  }
                ]
              }
            }
          ]
        }
      })
    },
    // 近一周报修单
    initChartWeekOrder() {
      this.myChart = echarts.init(this.$refs.chartWeekOrder)
      // 调用setOption绘制图表
      this.myChart.setOption({
        xAxis: {
          type: 'category',
          data: [this.$store.state.timeWeek[6], this.$store.state.timeWeek[5], this.$store.state.timeWeek[4], this.$store.state.timeWeek[3], this.$store.state.timeWeek[2], this.$store.state.timeWeek[1], this.$store.state.timeWeek[0]]
        },
        yAxis: {
          type: 'value',
          // interval: 1
        },
        tooltip: {
          trigger: 'axis'
        },
        // backgroundColor: '#F3F3FA',
        title: {
          text: '近一周 日报修量',
          subtext: '',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            fontFamily: "宋体",
            fontSize: 20,
          }
        },
        series: [
          {
            data: [this.$store.state.orderSeven, this.$store.state.orderSix, this.$store.state.orderFive, this.$store.state.orderFour, this.$store.state.orderThree, this.$store.state.orderTwo, this.$store.state.orderOne],
            type: 'line',
            label: {
              show: true,
              position: 'center'
            },
          }
        ]
      })
    },
    // 报修单满意度
    initChartEvaluationCount() {
      this.myChart = echarts.init(this.$refs.chartEvaluationCount)
      // 调用setOption绘制图表
      this.myChart.setOption({
        // title: {
        //   text: '',
        //   subtext: '',
        //   left: 'center',
        // },
        color: ["#EE6666", "#96D479", "#FAC858",],
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'horizontal',
        //   left: 'left',
        //   textStyle: {
        //     color: "white"
        //   }
        // },
        title: {
          text: '报修评价',
          subtext: '',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            fontFamily: "宋体",
            fontSize: 20,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            // fontFamily: "宋体",
            // fontSize: 12,
          }
        },
        series: [
          {
            name: '评价数量',
            type: 'pie',
            radius: ['30%', '45%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              { value: this.$store.state.evaluationCount[2].number, name: '差评' },
              { value: this.$store.state.evaluationCount[1].number, name: '中评' },
              { value: this.$store.state.evaluationCount[0].number, name: '好评' },
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      })
    },
    // 各校区报修单
    initChartCampusOrder() {
      this.myChart = echarts.init(this.$refs.chartCampusOrder)
      // 调用setOption绘制图表
      this.myChart.setOption({
        // title: {
        //   text: '',
        //   subtext: '',
        //   left: 'left'
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'horizontal',
        //   left: 'left',
        //   textStyle: {
        //     color: "white"
        //   }
        // },
        title: {
          text: '各区域报修总量',
          subtext: '',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            fontFamily: "宋体",
            fontSize: 20,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            // fontFamily: "宋体",
            // fontSize: 12,
          }
        },
        series: [
          {
            name: '报修单数量',
            top: '10%',
            type: 'pie',
            // radius: '50%',
            // label: {
            //   show: false,
            //   position: 'left'
            // },
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: false
            },
            data: [
              { value: this.$store.state.campusOrder[1].number, name: '磬苑南区' },
              { value: this.$store.state.campusOrder[2].number, name: '磬苑北区' },
              { value: this.$store.state.campusOrder[4].number, name: '磬苑教学区' },
              { value: this.$store.state.campusOrder[0].number, name: '龙河校区' },
              // { value: this.$store.state.campusOrder[1].number, name: '蜀山校区' },
              // { value: this.$store.state.campusOrder[5].number, name: '金寨路校区' }
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      })
    },
    // 学生类型统计
    initChartStudentType() {
      this.myChart = echarts.init(this.$refs.chartStudentType)
      // 调用setOption绘制图表
      this.myChart.setOption({
        // title: {
        //   text: '',
        //   subtext: '',
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'horizontal',
        //   left: 'left',
        //   textStyle: {
        //     color: "white"
        //   }
        // },
        title: {
          text: '全校学生类型',
          subtext: '',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            fontFamily: "宋体",
            fontSize: 20,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          orient: 'vertical',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            // fontFamily: "宋体",
            // fontSize: 12,
          }
        },
        series: [
          {
            name: '学生人数',
            top: '10%',
            type: 'pie',
            // radius: '50%',
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: this.$store.state.studentType[2].number, name: '本科生' },
              { value: this.$store.state.studentType[1].number, name: '博士生' },
              { value: this.$store.state.studentType[0].number, name: '硕士生' },
              { value: this.$store.state.studentType[3].number, name: '交换生' },
              { value: this.$store.state.studentType[4].number, name: '留学生' },
              // { value: 0, name: '交换生' }
            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      })
    },
    // 各校区学生
    initChartCampusStu() {
      this.myChart = echarts.init(this.$refs.chartCampusStu)
      // 调用setOption绘制图表
      this.myChart.setOption({
        // title: {
        //   text: '',
        //   subtext: '',
        //   left: 'center'
        // },
        // tooltip: {
        //   trigger: 'item'
        // },
        // legend: {
        //   orient: 'horizontal',
        //   left: 'left',
        //   textStyle: {
        //     color: "white"
        //   }
        // },
        // legend: {
        //   top: 'bottom'
        // },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   top: '10%',
        //   orient: 'vertical',
        //   left: 'left',
        //   textStyle: {
        //     color: "white",
        //     // fontFamily: "宋体",
        //     // fontSize: 12,
        //   }
        // },
        title: {
          text: '各校区学生人数',
          subtext: '',
          left: 'left',
          textStyle: {
            color: "#409EFF",
            fontFamily: "宋体",
            fontSize: 20,
          }
        },
        series: [
          {
            name: '学生人数',
            top: '30%',
            // type: 'pie',
            // radius: '50%',
            // label: {
            //   show: false,
            //   position: 'center'
            // },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: 40,
            //     fontWeight: 'bold'
            //   }
            // },
            type: 'pie',
            radius: [20, 80],
            center: ['50%', '40%'],
            roseType: 'area',
            // itemStyle: {
            //   borderRadius: 8
            // },
            data: [
              { value: this.$store.state.campusStudent[2].number, name: '龙河校区' },
              { value: this.$store.state.campusStudent[1].number, name: '磬苑北区' },
              { value: this.$store.state.campusStudent[3].number, name: '磬苑南区' },
              { value: this.$store.state.campusStudent[4].number, name: '金寨路校区' },
              { value: this.$store.state.campusStudent[0].number, name: '蜀山校区' },

            ],
            // emphasis: {
            //   itemStyle: {
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //   }
            // }
          }
        ]
      })
    },
    getDateWeek(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1;;//获取当前月份的日期
      var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate();
      return y + "-" + m + "-" + d;
    },
    getDateDay(AddDayCount) {
      var dd = new Date();
      dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
      var m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1;;//获取当前月份的日期
      var d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate();
      return m + "-" + d;
    },
  },
  created() {
    // console.log("今天：" + this.getDateWeek(0));
    // console.log("昨天：" + this.getDateWeek(-1));
    // console.log("前天：" + this.getDateWeek(-2));
    // console.log("大前天：" + this.getDateWeek(-3));
    this.$store.commit('DElETE_orderWeek')
    this.$store.commit('DELETE_timeWeek')

    this.getCampusStudent()

    this.$store.commit('SET_timeWeek', this.getDateDay(0))
    this.$store.commit('SET_timeWeek', this.getDateDay(-1))
    this.$store.commit('SET_timeWeek', this.getDateDay(-2))
    this.$store.commit('SET_timeWeek', this.getDateDay(-3))
    this.$store.commit('SET_timeWeek', this.getDateDay(-4))
    this.$store.commit('SET_timeWeek', this.getDateDay(-5))
    this.$store.commit('SET_timeWeek', this.getDateDay(-6))


    // this.getTime()
    // if (window.localStorage.getItem('firstTime') == false) {
    //   this.getMaintainForm()
    //   this.getStudentNum()
    // } else {
    //   window.localStorage.setItem('firstTime', false)
    // }
  },
  mounted() {
    this.initChartStudentType()
    this.initChartCampusStu()
    this.initChartCampusOrder()
    this.initChartEvaluationCount()
    this.initChartWeekOrder()
    this.initChartCenter()
    // console.log(this.$store.state.orderOne);
  },
};
</script>
<style lang="scss" scoped>
.common-container {
  height: 100vh;
  width: 100%;
  background-color: #ededed;

  .common-aside {
    height: 100%;
    background-color: rgb(27, 34, 70);
    // overflow-y: hidden;
    // overflow-x: hidden;
  }

  .common-header {
    // background-color: rgb(132, 172, 246);
    // background-color: rgb(27, 34, 70);
    background-color: white;


  }

  .common-main {
    // margin-top: 20px;
    // margin-left: 20px;
    // margin-right: 10px;
    // margin-bottom: 10px;
    margin: 10px;
    background-color: white;
  }

}

#Page {
  // background-color: #100C2A;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  // background-image: url(../../assets/img/bgc.png);
  // background-repeat: no-repeat;
  // border: 1px solid rgb(56, 56, 56);
}

.title {
  // width: 100%;
  height: 30px;
  color: white;
  line-height: 30px;
  font-family: '楷体';
  font-size: 20px;
  position: relative;
  // background: linear-gradient(to right, #487fff, white);
}

#bgc {
  width: 100%;
  height: 100%;
  position: absolute;
  // opacity: 0.7;
}

.chart_left {
  width: 29%;
  height: 45%;
  margin-left: 10px;
  // border: 1px solid rgb(56, 56, 56);
}

.chart_center {
  width: 39%;
  height: 48%;
  // border: 1px solid rgb(56, 56, 56);
}

.chart_right {
  width: 29%;
  height: 45%;
  // border: 1px solid rgb(56, 56, 56);
}

#chartBar {
  width: 100%;
  height: 100%;
  // border: 2px solid rgb(218, 218, 218);
}

#chartPie {
  width: 100%;
  height: 100%;
  // border: 2px solid rgb(231, 10, 10);
}



#Nowtime {
  font-size: 20px;
  color: #2e81ff;
}

#refresh {
  width: 70px;
  height: 30px;
  background-color: white;
  color: #2e81ff;
  position: absolute;
  bottom: 10px;
  left: 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

.map {
  width: 100%;
  height: 100%;
}

.grid-content {
  background-color: #2e81ff;
  height: 50px;
  width: 30%;
}
</style>
